<!-- src/components/ImageProcessor.vue -->
<template>
  <div class="image-processor">
    <canvas ref="canvas" />
    <div class="controls">
      <button @click="applyEffect('natural')">自然</button>
      <button @click="applyEffect('defogging')">去雾</button>
      <button @click="applyEffect('sharpen')">锐化</button>
      <button @click="applyEffect('grayscale')">黑白</button>
      <button @click="applyEffect('invert')">反色</button>
      <button @click="applyEffect('vintage')">老照片效果</button>
      <button @click="applyEffect('mosaic')">马赛克</button>
      <button @click="applyEffect('gaussian')">高斯模糊</button>
      <button @click="applyEffect('colorSplit')">颜色分离</button>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import * as PIXI from "pixi.js";
import img1 from "@/assets/imgs/01.jpg";
import {
  createNaturalFilter, // 自然
  createDefoggingFilter, // 雾化
  createSharpenFilter, // 锐化
  createGrayscaleFilter, // 黑白
  createInvertFilter, // 反色
  createMosaicFilter, // 马赛克
  createVintageFilter, // 老照片效果
  createGaussianBlurFilter, // 高斯模糊
  createColorSplitFilter // 颜色分离
} from "@/utils/shaders/shadersUtils";

// 组件状态
const canvas = ref(null);
let app = null;
let sprite = null;
let currentFilter = null;

// 初始化PIXI应用
const initPixi = () => {
  app = new PIXI.Application({
    view: canvas.value,
    width: 800,
    height: 600,
    backgroundColor: 0x000000
  });

  // 加载图片
  PIXI.Assets.load(img1).then(texture => {
    sprite = new PIXI.Sprite(texture);
    sprite.width = app.screen.width;
    sprite.height = app.screen.height;
    app.stage.addChild(sprite);
  });
};

// 应用滤镜效果
const applyEffect = effectName => {
  if (currentFilter) {
    sprite.filters = [];
  }

  switch (effectName) {
    case "natural":
      currentFilter = createNaturalFilter();
      break;
    case "defogging":
      currentFilter = createDefoggingFilter();
      break;
    case "sharpen":
      currentFilter = createSharpenFilter();
      break;
    case "grayscale":
      currentFilter = createGrayscaleFilter();
      break;
    case "invert":
      currentFilter = createInvertFilter();
      break;
    case "mosaic":
      currentFilter = createMosaicFilter({
        width: sprite.width,
        height: sprite.height
      });
      break;
    case "gaussian":
      currentFilter = createGaussianBlurFilter(sprite, 1.0)[0]; // 只使用水平方向的模糊效果
      break;
    case "vintage":
      currentFilter = createVintageFilter();
      break;
    case "colorSplit":
      currentFilter = createColorSplitFilter();
      break;
  }

  if (currentFilter) {
    sprite.filters = [currentFilter];
  }
};

onMounted(() => {
  initPixi();
});

onUnmounted(() => {
  if (app) {
    app.destroy(true);
  }
});
</script>
<style scoped>
.image-processor {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.controls {
  display: flex;
  gap: 10px;
}

button {
  padding: 8px 16px;
  color: white;
  cursor: pointer;
  background-color: #4caf50;
  border: none;
  border-radius: 4px;
}

button:hover {
  background-color: #45a049;
}
</style>
